<!DOCTYPE html>
<html>
<head>
<style>
/* 容器基础样式 */
.dynamic-border {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 50px auto;
  padding: 20px;
  background: #1a1a1a;
  border-radius: 8px;
}

/* SVG边框层 */
.border-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}

/* 流光动画 */
.glow {
  position: absolute;
  width: 150%;
  height: 150%;
  background: linear-gradient(
    45deg,
    #ff0080 0%,
    #ff8c00 25%,
    #40e0d0 50%,
    #ff8c00 75%,
    #ff0080 100%
  );
  animation: flow 4s linear infinite;
  filter: url(#glow-filter);
}

@keyframes flow {
  0% { transform: translate(-30%, -30%) rotate(0deg); }
  100% { transform: translate(-30%, -30%) rotate(360deg); }
}

/* 粒子效果 */
.particles {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.3;
  mix-blend-mode: screen;
}

/* 内容样式 */
.content {
  position: relative;
  z-index: 2;
  color: white;
  font-family: Arial;
}
</style>
</head>
<body>
  <div class="dynamic-border">
    <div class="content">
      <h2>Awesome Border</h2>
      <p>Hover to see effect ↓</p>
    </div>
    
    <div class="border-effect">
      <!-- SVG滤镜定义 -->
      <svg style="display: none;">
        <filter id="glow-filter">
          <feGaussianBlur stdDeviation="8" result="coloredBlur"/>
          <feMerge>
            <feMergeNode in="coloredBlur"/>
            <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>
      </svg>
      
      <div class="glow"></div>
      <div class="particles"></div>
    </div>
  </div>
</body>
</html>